<template>
  <view>
    <view class="container" :style="{height: wh +'px'}">
      <scroll-view class="scroll-list" scroll-y="true">
        <block v-for="(item,index) in taskList" :key="index">
          <view class="scroll-item" @click="goMainTask()">
            <view class="task-image">
              <image src="/static/afterSchool.png" mode=""></image>
            </view>
            <view class="task-Info">
              <view class="task-title">
                {{item.mainTasks.mainTaskName}}
              </view>
              <view class="task-footer">
                <view class="task-integral">
                 积分：{{item.mainTasks.integral}}
                </view>
                <view class="completeCount">
                  已完成375
                </view>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>
<script>
  export default {
    props:{
      wh:Number,
      taskList:Array
    },
    data() {
      return {
      }
    },
    methods:{
      goMainTask() {
        uni.navigateTo({
          url: '/subpkg/mainTask/mainTask'
        })
      }
    }
  }
</script>
<style lang="scss">
  .container {

    .scroll-list {
      height: 100%;

      .scroll-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 94%;
        height: 220rpx;
        margin: 30rpx auto;
        padding-right: 10rpx;
        background-color: #fff;
        box-shadow: 0 0 15rpx #999;

        .task-image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 10rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .task-Info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 470rpx;
          height: 100%;

          .task-title {
            margin-top: 10rpx;
            font-size: 32rpx;
          }

          .task-footer {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 24rpx;
            color: #666;
            
          }
        }
      }
    }
  }
</style>